<template>
	<view class="wrap">
		<up-picker ref="uPickerRef" :defaultIndex="popupDefaultIndex" :show="pickerShow" :columns="columns"
			@cancel="cancel" @confirm="confirm" @change="changeHandler" confirmColor="#FF47AB" keyName="name"
			:title="title" />
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue'
	const {
		columns
	} = defineProps({
		pickerShow: {
			type: Boolean,
			default: false
		},
		columns: {
			type: Array,
			default: []
		},
		title: {
			type: String,
			default: ''
		},
		popupDefaultIndex: {
			type: Array,
			default: []
		}
	})

	const emit = defineEmits()

	const confirm = (val) => {
		emit('confirm', {...val.value})
		cancel()
	}

	const cancel = () => {
		emit('cancel', false)
	}

	const uPickerRef = ref(null)

	const changeHandler = (e) => {
		const {
			columnIndex,
			value,
			values,
			index,
		} = e;
		if(columnIndex === 0){
			uPickerRef.value.setColumnValues(1, columns[0][index].careers);
		}
	};
</script>

<style lang="scss">
	.wrap {
		.popup-content-list-item {
			height: 96rpx;
			margin-bottom: 40rpx;
			background-color: #FFFFFF;
			border-radius: 200rpx 200rpx 200rpx 200rpx;
			border: 2rpx solid #444444;
			font-size: 30rpx;

			&.active {
				background-color: rgba(255, 71, 171, 0.2);
				border-radius: 200rpx 200rpx 200rpx 200rpx;
				border: 2rpx solid #FF47AB;
				font-size: 30rpx;
				color: #FF47AB;
			}
		}

		.popup-content-list-btn {
			background: #FF47AB;
			border-radius: 200rpx 200rpx 200rpx 200rpx;
			font-size: 30rpx;
			color: #FFFFFF;
			border-color: transparent;
		}
	}
</style>